<template>
  <view>
    <view class="tableBox">
      <table class="data-table">
        <thead>
          <tr class="header">
            <!-- 表头 -->
            <!-- <th class="show-border index">序号</th> -->
            <th :class="[item.border ? 'show-border' : '']" v-for="item in filterColumns"
              :key="item.value" :style="{ width: item.width || getWidth() }">
              {{ item.name }}
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- 多选 -->
          <tr class="item" v-for="(item, index) in g_data" :key="index">
            <!-- <td class="index">{{ index + 1 }}</td> -->
            <td v-for="part in filterColumns" :key="part.key"
              :class="[part.border ? '.td' : '']"
              :style="{ width: part.width || getWidth() }">
              <template v-if="!part.slot">
                {{ item[part.key] }}
              </template>
              <template v-else>
                <slot :name="part.key"></slot>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </view>
    <!-- 列表无数据 -->
    <view class="noData" v-if="g_data.length === 0">
      {{ g_data.length === 0 ? '暂无数据' : '' }}
    </view>

    <view v-if="isShowPagination">
      <uni-pagination :pageSize="query.pageSize" :current="query.current_page"
        :total="total" prev-text="上一页" next-text="下一页" @change="change" />
    </view>
  </view>
</template>

<script>
  const preConfig = {
    normal: {
      page: 'page',
      pageSize: 'limit',
      formatResponseHandler: data => ( {
        total: data.data.totalCount,
        data: data.data.list,
      } ),
    },
    records: {
      page: 'pageNo',
      pageSize: 'pageSize',
      formatResponseHandler: data => ( {
        total: data.data.total,
        data: data.data.records,
      } ),
    },
  };
  export default {
    name: 'StaticTable',
    //父组件的table数据
    props: {
      preConfigType: {
        type: String,
        default: 'records',
      },
      // 与 dataSource 只能二选一
      http: {
        type: Function
      },
      // 与 dataSource 只能二选一
      params: {
        type: Object,
        default: () => {}
      },
      // eslint-disable-next-line vue/require-prop-type-constructor
      dataSource: Array,
      columns: Array,
      meta: {
        type: Object,
        default: () => {}
      },
      handler: {
        type: Object | Function,
      },
      isShowPagination: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        g_data: [],
        filterColumns: [],
        total: 0,
        // current_page: 1,
        // per_page: 10,
        last_page: 1,
        query: {
          current_page: 1,
          pageSize: 10
        }
      };
    },
    watch: {
      columns: {
        handler() {
          this.$nextTick( () => {
            this.filterColumns = this.columns.map( v => v )
          } )
        },
        deep: true,
        immediate: true
      },
      params: {
        handler() {
          this.$nextTick( () => {
            this.featchData()
          } )
        },
        deep: true,
      },
      dataSource: {
        handler() {
          this.$nextTick( () => {
            this.featchData()
          } )
        },
        deep: true,
      }
    },
    methods: {
      change( {
        type,
        current
      } ) {

        if ( this.http && typeof this.http === 'function' ) {
          this.query = {
            ...this.query,
            current_page: current
          }
          this.featchData()
        } else {
          this.$emit( 'pageChange', {
            type,
            current
          } )
        }
      },
      getWidth() {
        let allWidth = '100%';
        return {
          width: `calc(${allWidth} - 100rpx)`
        };
      },
      async featchData() {
        if ( this.http && typeof this.http === 'function' ) {
          console.log( 'http' );
          this.query = {
            ...this.query,
            ...this.params,
          }
          const res = await this.http( query )
          this.$emit( 'response', res );

          this.total = res.meta?.total
          this.query = {
            ...this.query,
            current_page: res.meta?.current_page
          }
          this.last_page = res.meta?.last_page

          if ( this.handler && typeof this.handler === 'function' ) {
            // 处理数据格式
            res = this.handler( res )
            this.g_data = res.data.map( v => v )
          } else {
            this.g_data = res.data.map( v => v )
          }
        } else {
          this.total = this.meta?.total || this.dataSource.length;
          this.query = {
            ...this.query,
            current_page: this.meta?.current_page
          }
          this.last_page = this.meta?.last_page
          this.g_data = this.dataSource.map( v => v )
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .item {
    display: flex;
  }

  // table盒子
  .tableBox {
    width: 100%;
    overflow: auto;
    padding-top: 20rpx;
    padding-bottom: 20rpx;

    .tableCheck {
      width: 100%;
    }

    .view-table-container {
      width: 100%;
    }
  }

  // 无数据
  .noData {
    text-align: center;
    line-height: 100rpx;
    font-weight: 700;
    font-size: 24rpx;
  }

  // 搜索下拉框
  .serchBox {
    .yaw-radio-group {
      height: 30rpx;
      line-height: 30rpx;
    }
  }

  .data-table {
    width: 100%;
    border-collapse: collapse !important;
  }

  .data-table thead {
    background-color: #e3edf7;
  }

  .data-table thead th {
    height: 40rpx;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    text-align: left !important;
    padding-left: 10px;
  }

  // .td {
  //   border-left: 1px solid #dae9ef !important;
  //   border-bottom: 1px solid #dae9ef !important;
  // }

  .data-table tbody td {
    // height: 60rpx;
    font-size: 14px;
    // line-height: 60rpx;
    font-weight: normal;
    color: #666666;
    text-align: left;
    padding-left: 10px;
  }

  .data-table tbody tr:hover {
    background-color: #EDF4F7;
  }

  thead {
    .header {
      display: flex;
      align-items: center;
    }

    tr {
      .show-border {
        border-right: 1px solid #dbddde;
      }

      th {
        padding-top: 20rpx;
        padding-bottom: 20rpx;
      }
    }
  }



  .index {
    width: 100rpx !important;
  }
</style>